---
import Layout from "../layouts/Layout.astro";
import PageHeading from "../components/page-heading.astro";
import IconMdiCalendarMonthOutline from "~icons/mdi/calendar-month-outline";
import IconMdiEye from "~icons/mdi/eye";
import IconMdiCommentOutline from "~icons/mdi/comment-outline";
import IconMdiHeart from "~icons/mdi/heart";
import IconMdiFolderOutline from "~icons/mdi/folder-outline";
import IconMdiTag from "~icons/mdi/tag";
---

<Layout>
  <PageHeading>
    <th:block slot="title" th:text="${post.spec.title}"> </th:block>
    <div class="post-info mt-2">
      <div class="meta">
        <div class="info">
          <IconMdiCalendarMonthOutline class="w-3 h-3" />
          <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
          ></span>
          <IconMdiEye class="w-3 h-3" />
          <span th:text="${post.stats.visit}">0</span>
          <IconMdiCommentOutline class="w-3 h-3" />
          <a
            th:href="@{${post.status.permalink}}"
            th:text="${post.stats.comment}"
          >
            0
          </a>
          <div
            class="inline-block hover:text-red-700 cursor-pointer"
            x-bind:class="{'text-red-700': liked(${post.id?c})}"
            x-on:click="handleLike(${post.id?c})"
          >
            <IconMdiHeart class="w-3 h-3" />
            <!-- <i class="iconify w-3 h-3" data-icon="mdi:heart-outline"></i> -->
            <span
              data-post-id-likes="${post.id?c}"
              th:text="${post.stats.upvote}">0</span
            >
          </div>
          <th:block
            th:if="${not #lists.isEmpty(post.categories)}"
            class="inline-block"
          >
            <IconMdiFolderOutline class="w-3 h-3" />
            <a
              th:each="category : ${post.categories}"
              th:href="@{${category.status.permalink}}"
              th:title="${category.spec.displayName}"
              th:text="${category.spec.displayName}"
            >
            </a>
          </th:block>
          <th:block
            th:if="${not #lists.isEmpty(post.tags)}"
            class="inline-block"
          >
            <IconMdiTag class="w-3 h-3" />
            <a
              th:each="tag : ${post.tags}"
              th:href="@{${tag.status.permalink}}"
              th:title="${tag.spec.displayName}"
              th:text="${tag.spec.displayName}"
            >
            </a>
          </th:block>
        </div>
      </div>
    </div>
  </PageHeading>
  <div class="post-page">
    <div class="post animated fadeInDown">
      <div
        th:utext="${post.content.content}"
        id="post-content"
        class="post-content markdown-body"
      >
      </div>
    </div>
    <div
      th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
      class="pagination flex justify-between items-center"
    >
      <a
        class="btn"
        th:if="${postCursor.hasPrevious()}"
        role="navigation"
        th:href="@{${postCursor.previous.status.permalink}}"
        th:title="${postCursor.previous.spec.title}"
      >
        上一篇
      </a>
      <a
        class="btn"
        th:if="${postCursor.hasNext()}"
        role="navigation"
        th:href="@{${postCursor.next.status.permalink}}"
        th:title="${postCursor.next.spec.title}"
      >
        下一篇
      </a>
    </div>
    <div id="comment_widget" style="margin: 30px;">
      <halo:comment
        group="content.halo.run"
        kind="Post"
        th:attr="name=${post.metadata.name}"
      >
      </halo:comment>
    </div>
  </div>
</Layout>
